<template>
    <div>
        <div class="box" v-for="(v,i) in listData" :key="i">
            <p class="box-title">{{v.channel_info.name}}</p>
            <div class="ms-box" v-if="v.channel_info.type == 3">
                <div class="ms-cont" @click="addDetail(item)" v-for="(item,index) in v.list" :key="index">
                    <img :src="item.teacher_avatar" alt />
                    <div>
                        <p style="margin:10px 0;font-size:20px">{{item.teacher_name}}</p>
                        <p style="margin:0;color:#999;overflow:hidden;white-space:nowrap;text-overflow:ellipsis">
                            {{item.introduction}}</p>
                    </div>
                </div>
            </div>
            <div v-else>
                <div class="jp-box" v-for="(item,index) in v.list" :key="index" @click="CourseFn(item)">
                    <div class="jp-box-item1">{{item.title}}</div>
                    <div class="jp-box-item2">共点击量</div>
                    <div class="jp-box-item3">
                        <img :src="item.cover_img" alt />
                    </div>
                    <div class="jp-box-item4">
                        <p>{{item.id}}人已报名</p>
                        <span v-if="item.price == 0">0.00</span>
                        <div v-else>
                            <span>{{item.price | num}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        listData: {
            type: Array,
            defolute: () => { channel_info: { name: '' } },
        }
    },
    data() {
        return {

        };
    },
    methods: {
        addDetail(e){
            this.$emit('addDetail',e)
        },
        CourseFn(e){
            this.$emit('CourseFn',e)
        }
    },
    filters: {
        num(e) {
            //价钱补零
            return parseFloat(e).toFixed(2)
        },
    },
    components: {

    },
};
</script>

<style lang="scss" scoped>
.box {
    box-sizing: border-box;
    // width: 750px;
    padding: 0 15px 20px;

    .box-title {
        font-size: 24px;
        line-height: 19px;
        padding: 0 0 0 10px;
        height: 20px;
        margin: 0 5px;
        border-left: 3px solid #eb6100;
    }
}

.ms-box {
    width: 100%;
    box-sizing: border-box;

    .ms-cont {
        margin: 10px 0 0 0;
        width: 100%;
        height: 126px;
        background: #fff;
        border-radius: 5px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        img {
            width: 58px;
            height: 58px;
            border-radius: 50%;
        }

        div {
            width: 620px;
            font-size: 18px;
        }
    }
}

.jp-box {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #fff;
    margin: 14px 0;
    padding: 0 15px;
    border-radius: 6px;

    .jp-box-item1 {
        font-size: 25px;
        line-height: 34px;
        margin: 8px 0 0 0;
    }

    .jp-box-item2 {
        font-size: 20px;
        height: 34px;
        line-height: 34px;
        color: #888;
    }

    .jp-box-item3 {
        height: 65px;
        display: flex;
        align-items: center;
        color: #999;
        margin: 21px;

        img {
            border-radius: 50%;
            width: 57px;
            height: 57px;
            margin-right: 15px;
        }
    }

    .jp-box-item4 {
        border-top: 1px solid rgb(243, 241, 241);
        height: 44px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 20px;
        width: 100%;

        p {
            margin: 0;
            width: 290px;
            color: #999;
        }

        span {
            font-size: 24px;
            color: #eb6100;
            display: flex;
            align-items: center;
        }
    }
}
</style>
